﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目可视化地域分布图</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/zs.css">
    <link href="../icons/font_map/iconfont.css" rel="stylesheet" />
    <link href="../../WF/Scripts/layui/layui/css/layui.css" rel="stylesheet" />
    <script src="../../WF/Scripts/QueryString.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/bootstrap/js/jquery.min.js"></script>
    <script src="../../WF/Scripts/config.js" type="text/javascript"></script>
    <script src="../../WF/Comm/Gener.js" type="text/javascript"></script>
    <script src="../../WF/Scripts/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../WF/Scripts/layui/layui/layui.js"></script>
    <style>
        .layui-laydate, .layui-laydate-hint {
            border: 1px solid #d2d2d2;
            box-shadow: 0 2px 4px rgba(0,0,0,.12);
            background-color: #fff;
            color: #666;
            top: 20px;
            left: 10%;
        }

            .layui-laydate .layui-this {
                background-color: #3A7FD5 !important;
                color: #FFF !important;
            }

        .layui-table th {
            border: 1px solid #3A7FD5 !important;
            background-color: #3857A2;
            font-weight: bold;
            color: white;
        }

        .layui-table td {
            border: 1px solid #3A7FD5 !important;
            background-color: #001C70;
            color: white;
        }

        .myskin {
            background-color: #011035;
            box-shadow: 0 0 0 rgba(0,0,0,0);
            border: 1px solid #3A7FD5;
        }

        .layui-laydate-main {
            background-color: #011035 !important;
            box-shadow: 0 0 0 rgba(0,0,0,0) !important;
            border: 1px solid #3A7FD5 !important;
        }

        .layui-laydate-header, .layui-laydate-list {
            border: 1px solid #3A7FD5 !important;
            background-color: #3857A2;
            color: white;
        }

        .layui-layer-title {
            color: white !important;
            font-weight: bold;
            font-size: 18px;
            border: 1px solid #3A7FD5;
        }

        .layui-laydate, .layui-laydate-main {
            border: 1px solid #3A7FD5 !important;
        }

        .layui-elem-field {
            border: 1px solid #3A7FD5;
        }

        .layui-layer-ico {
            background: url(../image/mh/close.png) no-repeat !important;
        }
    </style>
</head>

<body class="zs_bg">
    <div class="zs_header">
        <div class="zs_header_left">
            <div class="goBack" onclick="goBack()"></div>
            <div class="reportTime">
                <span class="week"></span>
                <span class="hour"></span>
            </div>
        </div>
        <div class="zs_header_title titleColor">项目可视化地域分布图</div>
        <div class="zs_header_right"></div>
    </div>
    <div class="zs_main">
        <div class="zs_main_left">
            <div class="leftBox">
                <div class="title">项目总体情况</div>
                <div class="leftItemBox">
                    <div class="leftItem">
                        <span class="name">项目总数</span>
                        <span class="num">0</span>
                    </div>
                    <div class="leftItem">
                        <span class="name">进行中</span>
                        <span class="num">0</span>
                    </div>
                    <div class="leftItem">
                        <span class="name">已完成</span>
                        <span class="num">0</span>
                    </div>
                    <div class="leftItem">
                        <span class="name">已延期</span>
                        <span class="num">0</span>
                    </div>
                </div>
            </div>
            <div class="leftBox leftBoxItemActive">
                <div class="title">
                    <span>项目动态</span>
                    <!--<span class="detail">详情></span>-->
                </div>
                <div class="leftBoxUiLi">
                    <ul></ul>
                </div>
            </div>
            <div class="leftBox leftBoxwarnMes">
                <div class="title">预警信息</div>
                <div class="leftBoxwarnUiLi">
                    <ul></ul>
                </div>
            </div>
        </div>
        <div class="zs_main_center">
            <div class="cenTop">
                <div class="query">
                    <input type="text" placeholder="选择年份" name="date" id="date" lay-verify="date" autocomplete="off" class="inp">
                    <div class="queryBtn" onclick="Search()"></div>
                    <div class="goBack2" onclick="backChina();"></div>
                </div>
                <div class='map' id="map" style=""></div>
            </div>
            <div class="cenBot">
                <div class="title cenBotTit" style="margin-top: 1vh;">各单位经费投入</div>
                <div class="unit" id="unit"></div>
            </div>
        </div>
        <div class="zs_main_right">
            <div class="title">项目经费分析</div>
            <div class="zs_right_list">
                <div class="zs_right_item">
                    <div class="subTitle">金额统计</div>
                    <div class="freeBox">
                        <div class="leftItem">
                            <span class="name">经费总量</span>
                            <span class="num">0</span>
                        </div>
                        <div class="leftItem">
                            <span class="name">项目经费</span>
                            <span class="num">0</span>
                        </div>
                        <div class="leftItem">
                            <span class="name">年度计划安排</span>
                            <span class="num">0</span>
                        </div>
                        <div class="leftItem">
                            <span class="name">留用经费</span>
                            <span class="num">0</span>
                        </div>
                    </div>
                </div>
                <div class="zs_right_item freeStatis">
                    <div class="subTitle">项目类型经费统计</div>
                    <div class="freeChart" id="freeChart"></div>
                </div>
                <div class="zs_right_item investment">
                    <div class="subTitle">年度投入TOP</div>
                    <div class="investmentChart" id="investmentChart">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="display:none;padding: 20px;" id="PrjList">
        <fieldset class="layui-elem-field">
            <div class="layui-fluid">
                <div class="layui-row">
                    <div class="layui-col-sm12" style="padding:10px" id="MasterGroupList">
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
    <script src="../../WF/Scripts/jquery/jquery.min.js"></script>
    <!--<script src="../js/echarts-lib.js"></script>-->
    <script src="../js/echarts.min.js"></script>
    <!--<script src="../js/mockData.js"></script>-->
    <script src="../js/warn.js"></script>
    <script src="../js/date.js"></script>
    <script src="../../WF/Scripts/layui/layui/lay/modules/laydate.js"></script>
    <script>
        //时钟
        $('.week').html(getWeekDate())
        var timer = setInterval(function () {
            var str = getHours()
            $('.hour').html(str)
        }, 1000)
        function goBack() {
            window.parent.close();
        }
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            laydate.render({
                elem: '#date', //指定元素
                max: new Date().getFullYear().toString(),
                type: 'year',
                value: new Date().getFullYear().toString(),
                isInitValue: true,
                trigger: 'click',
                showBottom: false,
                position: 'fixed',
                change: function (value, date, endDate) {
                    laydateYearSetValue(this, value, date);
                }
            });

            /**
             * laydate的year类型设值，在change方法调用
             *
             * @param thiz change里面的this
             * @param value change的参数value
             * @param date change的参数date
             */
            function laydateYearSetValue(thiz, value, date) {
                if (thiz.min.year <= date.year && date.year <= thiz.max.year) {
                    $(thiz.elem).val(value);
                } else if (date.year < thiz.min.year) {
                    $(thiz.elem).val(thiz.min.year);
                } else if (date.year > thiz.max.year) {
                    $(thiz.elem).val(thiz.max.year);
                }
                if (undefined == thiz.myYear) {
                    thiz.myYearListLength = $(".laydate-year-list")[0].getElementsByTagName("li").length;
                    if (thiz.value) {
                        thiz.myYear = (parseInt(thiz.value) - (thiz.myYearListLength - 1) / 2) + "年 - " + (parseInt(thiz.value) + (thiz.myYearListLength - 1) / 2) + "年";
                    } else {
                        thiz.myYear = (new Date().getFullYear() - (thiz.myYearListLength - 1) / 2) + "年 - " + (new Date().getFullYear() + (thiz.myYearListLength - 1) / 2) + "年";
                    }
                    if ($('.laydate-set-ym').find('span[lay-type="year"]').html() == thiz.myYear) {
                        $("#layui-laydate" + $(thiz.elem).attr('lay-key')).remove();
                    } else {
                        thiz.myYear = $('.laydate-set-ym').find('span[lay-type="year"]').html();
                    }
                } else {
                    if ($('.laydate-set-ym').find('span[lay-type="year"]').html() == thiz.myYear) {
                        $("#layui-laydate" + $(thiz.elem).attr('lay-key')).remove();
                    } else {
                        thiz.myYear = $('.laydate-set-ym').find('span[lay-type="year"]').html();
                    }
                }
            }
        });
        $('.goBack2').prop("hidden", "hidden");
        var myChartMap = echarts.init(document.getElementById('map'));
        function initChinaMap() {
            $.getJSON('./json/map.json', function (geoJson) {
                echarts.registerMap('china', geoJson);
                //myChartMap.hideLoading();
                var optionMap = mapChart();
                myChartMap.setOption(optionMap);
                myChartMap.on("click", function (params) {
                    //此处导致两侧div下移
                    $('.goBack2').removeAttr("hidden");


                    if (params.data != undefined && params.data.attr.level == 2) {

                        var title = "申报单位位置:" + params.name + "---项目列表";

                        var _html = '<table class="layui-table">';
                        _html += '<tr>';
                        _html += '<th>#</th>';
                        _html += '<th>项目名称</th>';
                        _html += '<th>申报单位</th>';
                        _html += '<th>总金额(万元)</th>';
                        _html += '</tr>';

                        var prjInfos = params.data.prjInfos;
                        for (var i = 0; i < prjInfos.length; i++) {
                            _html += '<tr>';
                            _html += '<th>' + (i + 1) + '</th>';
                            _html += '<th>' + prjInfos[i].prjName + '</th>';
                            _html += '<th>' + prjInfos[i].prjUnit + '</th>';
                            _html += '<th>' + prjInfos[i].prjZje + '</th>';
                            _html += '</tr>';
                        }
                        _html += "</table>";
                        $('#PrjList').html(_html);
                        layer.open({
                            title: title
                            , type: 1
                            , content: $('#PrjList')
                            , skin: 'myskin'
                            , area: ['600px', '500px']
                            , id: 'page1' //定义 ID，防止重复弹出
                            , end: function () {
                                $("#PrjList").css('display', 'none');
                            }
                        });
                        return;
                    }
                    if (params.data == undefined || params.data.attr == undefined) {
                        return;
                    }

                    var proId = params.data.attr.id;
                    if (params.data.attr.level == 2)//二级单位不要加载子级地图
                        return;

                    $.getJSON('./json/province/' + proId + '.json', function (json) {
                        myChartMap.clear();
                        echarts.registerMap('province', json);
                        myChartMap.hideLoading();

                        myChartMap.setOption(provinceMapChart(params.data.no));
                    })
                });
            });
        }
        //initChinaMap();
        function backChina() {
            initChinaMap();

            $('.goBack2').prop("hidden", "hidden");
        }

        function InitCharts() {
            var handler = new HttpHandler("BP.PM.Handler.AnalysisHandler");
            handler.AddPara("date", $('#date').val());
            var data = handler.DoMethodReturnString("InitScreenData");


            data = JSON.parse(data);
            if (!data.Success) {
                alert(data.Message);
                return;
            }

            data = data.Data;
            $('.num').eq(0).html(data.pos.PrjNum)
            $('.num').eq(1).html(data.pos.PrjRuning)
            $('.num').eq(2).html(data.pos.PrjOver)
            $('.num').eq(3).html(data.pos.PrjDaly)
            $('.num').eq(4).html(data.ped.JingFeiZongXuQiu)
            $('.num').eq(5).html(data.ped.XiangMuJingFei)
            $('.num').eq(6).html(data.ped.BenNianDuJiHuaAnPai)
            $('.num').eq(7).html(data.ped.DongYongLiuYongJingF_BNDJHAP)

            var myChart2 = echarts.init(document.getElementById('unit'));
            var myChart1 = echarts.init(document.getElementById('freeChart'));
            var myChart3 = echarts.init(document.getElementById('investmentChart'));

            //项目动态
            var news = data.xmdtDt;
            var newsStr = '';
            for (var i = 0; i < news.length; i++) {
                newsStr += '<li title="' + news[i].PrjName + '"><i>' + news[i].RDT + ' </i>' + news[i].PrjName + '</li>'
            }
            $('.leftBoxUiLi ul').html(newsStr)

            // 预警信息
            var warn = data.yjxxDt
            var warnStr = '';
            for (var i = 0; i < warn.length; i++) {
                warnStr += '<li><div class="warn_title"><span class="warnName">[项目延期风险]<i>' + news[i].PrjName + '</i></span><span class="warnTime">30秒前</span></div><div class="warnContent">' + news[i].PrjName + '</div></li>'
            }
            $('.leftBoxwarnUiLi ul').html(warnStr)

            // 单位经费投入
            var Dept1 = data.unitDt;
            var xData = [], yData = [];
            for (var i = 0; i < Dept1.length; i++) {
                xData.push(Dept1[i].Level1DeptName)
                yData.push(Dept1[i].JingFeiZongXuQiu)
            }

            var options2 = barCahrt(xData, yData, { "xName": "部门", "yName": "单位(万元)" });
            myChart2.setOption(options2);

            // 项目类型统计
            var PrjJingFei = data.xmlxDt;
            var pieData = [];
            for (var i = 0; i < PrjJingFei.length; i++) {
                var obj = {
                    value: PrjJingFei[i].JingFeiZongXuQiu,
                    name: PrjJingFei[i].FeeTypeNoT
                }
                pieData.push(obj)
            }
            var options1 = pieChart(pieData);
            myChart1.setOption(options1);

            // 年度top
            var Dept1Year = data.yearDt;

            var yearX = [], yearY = [];
            for (var i = 0; i < Dept1Year.length; i++) {
                yearX.push(Dept1Year[i].NianDu)
                yearY.push(Dept1Year[i].TotalZongJinE)
            }
            var options3 = topBar(yearX, yearY, { "xName": "年份", "yName": "单位(万元)" });
            myChart3.setOption(options3);

            initChinaMap();
        }

        $(function () {
            InitCharts();
        });
        function Search() {
            InitCharts();

            fullScreen();
        }
        function fullScreen() {
            var el = document.documentElement;
            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,

                wscript;

            if (typeof rfs != "undefined" && rfs) {
                rfs.call(el);
                return;
            }

            if (typeof window.ActiveXObject != "undefined") {
                wscript = new ActiveXObject("WScript.Shell");
                if (wscript) {
                    wscript.SendKeys("{F11}");
                }
            }
        }
    </script>
</body>

</html>